<template>
  <div class="register">
    <div class="top">
      <h3>注册新用户</h3>
    </div>
    <div class="registerForm" @keyup.enter="submitForm('ruleForm')">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            type="text"
            v-model.number="ruleForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码"  prop="Verification" >
          <el-input
            type="text"
            v-model.number="ruleForm.Verification"
            autocomplete="off"
          ></el-input><el-button type="primary" size="default" @click="getVerification">获取验证码</el-button>

        </el-form-item>
        <el-form-item label="登录密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repwd">
          <el-input v-model="ruleForm.repwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">同意协议并注册《西航用户协议》</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    var validatephone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value.toString().length !== 11) {
            callback(new Error('您输入的手机号不合法'))
          } else {
            callback()
          }
        }
      }, 500)
    }
    var validatepwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'))
      } else {
        callback()
      }
    }
    var validaterepwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateVerification = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    return {
      checked: false,
      ruleForm: {
        phone: '',
        Verification: '',
        pwd: '',
        repwd: ''
      },
      rules: {
        phone: [
          { validator: validatephone, trigger: 'blur' }
        ],
        Verification: [
          { validator: validateVerification, trigger: 'blur' }
        ],
        pwd: [
          { validator: validatepwd, trigger: 'blur' }
        ],
        repwd: [
          { validator: validaterepwd, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    registerStatus: {
      deep: true,
      handler (newval, oldval) {
        if (newval.status === 1) {
          this.$error(newval.msg)
        } else {
          this.$success(`${newval.msg},正在跳转中···`)
          setTimeout(() => {
            this.$router.push({ name: 'login' })
          }, 1500)
        }
      }
    }
  },
  computed: {
    ...mapState('registerAbout', ['registerStatus'])
  },
  methods: {
    // 获取验证码
    getVerification () {
      this.ruleForm.Verification = '142328'
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.checked === false) {
            this.$notify.error({
              title: '提示',
              message: '请勾选并遵守《西航用户协议》',
              showClose: false,
              duration: 1500
            })
          } else {
            this.$store.dispatch('registerAbout/register', this.ruleForm)
          }
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  mounted () {
    console.log(this)
  }
}
</script>

<style scoped lang="less">
/deep/ .el-form-item__content{
  display: flex;
}
.register {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  .top {
    height: 50px;
    line-height: 50px;
    background-color: #ececec;
    h3 {
      margin: 0;
      padding: 0;
      margin-left: 15px;
    }
  }
  .registerForm {
    padding-top: 20px;
    width: 400px;
    height: 500px;
    margin: 0 auto;
    input {
      outline: none;
      border: 1px solid #ccc;
    }
  }
}
</style>
